<template>
	<view :class="['orders',device == 'ios'?'iosPage':'']">
		<view class="menus dFlex jAround_aCenter">
			<view :class="['menuOne',status==''?'active':'']" @tap='changeMenu("")'>
				<text>全部</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='0'?'active':'']" @tap='changeMenu("0")'>
				<text>待支付</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='10'?'active':'']" @tap='changeMenu("10")'>
				<text>待发货</text>
				<view class="line"></view>
			</view>
			<!-- <view :class="['menuOne',status=='-2'?'active':'']" @tap='changeMenu("-2")'>
				<text>待提货</text>
				<view class="line"></view>
			</view> -->
			<view :class="['menuOne',status=='60'?'active':'']" @tap='changeMenu("60")'>
				<text>已完成</text>
				<view class="line"></view>
			</view> 
			<!-- <view :class="['menuOne',status=='60'?'active':'']" @tap='changeMenu("60")'>
				<text>已取消</text>
				<view class="line"></view>
			</view> -->
		</view>
		<view class="list" v-if="list.length">
			<view v-if="item.order_type != 2" class="order type2" v-for="(item,index) in list" :key='index' @tap.stop='lookDetail(item.id)'>
				<view class="orderNum dFlex jBetween_aCenter">
					<text>订单编号：{{item.orderno}}</text>
					<text class="status1" v-if="item.status == '0'">待付款</text>
					<text class="status1" v-if="item.status == '10'">待发货</text>
					<text class="status1" v-if="item.status == '20' && !item.source">待收货</text>
					<text class="status1" v-if="item.status == '20' && item.source">待提货</text>
					<text class="status1" v-if="item.status == '30' && !item.source">已收货</text>
					<text class="status1" v-if="item.status == '30' && item.source">已提货</text>
					<text class="status1" v-if="item.status == '40'">退货中</text>
					<text class="status1" v-if="item.status == '50'">已退货</text>
					<text class="status1" v-if="item.status == '60'">已完成</text>
					<text class="status2" v-if="item.status == '90'">交易关闭</text>
				</view>
				<view class="orderInfo dFlex jStart_aStart" v-for="(shop,idx) in item.ordergoods" :key='idx'>
					<view class="shopImg imgPublic">
						<image :src="shop.goods.main_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="order_name dFlex jBetween_aStart">
							<view class="shopName" v-if="shop.goods">{{shop.goods.title}}</view>
							<view class="user dFlex jStart_aCenter">
								<text class="rmb">￥</text>
								<text class="price">{{shop.total_money}}</text>
							</view>
						</view>
						<view class="selSpec dFlex jBetween_aCenter">
							<view class="spec">规格：{{shop.goods_attr?shop.goods_attr:'默认'}}</view>
							<text>x{{shop.goods_num}}</text>
						</view>
						<!-- <view class="btns dFlex jStart_aCenter" v-if="item.ordergoods.length>1">
							<view class="pay btn" v-if="shop.trade_status == '20'" @tap.stop='sureGet(item,idx)'>确认收货</view>
						</view> -->
					</view>
				</view>
				<view class="tj dFlex jBetween_aCenter">
					<view class='yongjin'>佣金: ￥<text>{{item.commission?item.commission:'0.00'}}</text></view>
					<view class="count dFlex jEnd_aCenter">
						<view class="shopCount">共{{item.shopCount}}件商品</view>
						<view class="pay">{{item.is_pay==0?'待付款':"已付款"}}：<text>{{item.total_money}}</text></view>
					</view>
				</view> 
				<!-- <view class="orderCount dFlex jEnd_aCenter"> 
					<view class="btns dFlex jEnd_aCenter">
						<view class="btn" v-if="item.status == '0'" @tap.stop='cancelOrder(item.id,index)'>取消订单</view>
						<view class="btn" v-if="item.status == '90'" @tap.stop='delOrder(item.id,index)'>删除订单</view>
						<view class="pay" v-if="item.status == '0'" @tap.stop='payOrder(item.id)'>立即付款</view>
						<view class="pay btn" v-if="item.status == '20' && item.source" @tap.stop='sureGet(item)'>确认提货</view>
						<view class="btn" v-if="(item.status == '10' && item.partFlag) || (item.status == '30' && item.source) || item.status == '20' || item.status == '60'" @tap.stop='wuliu(item)'>查看物流</view>
						<view class="btn" v-if="item.status == '20' && (status == '-2' || status=='-1') && item.source" @tap.stop='THShop(item)'>查看提货点</view>
						
						<view class="pay btn" v-if="item.source && (((status == '-2' || status=='-1') && item.status == '20') || (item.is_zt != '1' && item.status == '20'))" @tap.stop='sureGet(item)'>确认收货</view>
						<view class="pay" v-if="item.status == '60' && item.plFlag" @tap.stop='pinglun(item.id)'>评价商品</view>
						<view class="pay" v-if="(item.status >= '10' && item.status!='40' && item.status!='50' && item.status!='90' && item.source == '1v3' && item.source_id)" @tap.stop='shareOrder(item)'>查看奖励</view> 
					</view>
				</view>-->
			</view>
			<view class="order type1" v-if='item.order_type == 2' v-for="(item,index) in list" :key='index' @tap.stop='lookDetail(item.id)'>
				<view class="orderNum dFlex jBetween_aCenter">
					<text>订单编号：{{item.orderno}}</text>
					<view class="cutDown dFlex jEnd_aCenter" v-if="item.status=='0'">
						<view class="showStatus">待支付</view>
						<view class="time">00:12:35</view>
					</view>
					<text class="status1" v-if="item.status == '0'">待付款</text>
					<text class="status1" v-if="item.status == '10'">待发货</text>
					<text class="status1" v-if="item.status == '20'">待收货</text>
					<text class="status1" v-if="item.status == '30'">已收货</text>
					<text class="status1" v-if="item.status == '40'">退货中</text>
					<text class="status1" v-if="item.status == '50'">已退货</text>
					<text class="status1" v-if="item.status == '60'">已完成</text>
					<text class="status2" v-if="item.status == '90'">交易关闭</text>
				</view>
				<view class="orderInfo">
					<view class="shopInfo dFlex jBetween_aCenter">
						<view class="base dFlex jStart_aCenter">
							<view class="tags">书法·L3</view>
							<view class="shopName">{{item.goods_name}}</view>
						</view>
						<view class="price">¥<text>{{item.goods_price}}</text></view>
					</view>
					<view class="orderTime">2022年11月11日-12月11日 7次课 周一 18:00</view>
				</view>
				<view class="orderCount dFlex jBetween_aCenter">
					<view class="pay">实付：1.00</view>
					<view class="btns dFlex jEnd_aCenter">
						<view class="btn">取消订单</view>
						<view class="pay btn">立即付款</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
		</view>
		<view class="zz dFlex jCenter_aCenter" v-if="ztFlag">
			<view class="zt">
				<view class="titles dFlex jBetween_aCenter">
					<view class="closeIcon imgPublic"></view>
					<view class="title">自提点信息</view>
					<view class="closeIcon imgPublic" @tap.stop='ztFlag = false;'>
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/closeIcon.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content">
					<view class="line dFlex jStart_aStart">
						<view class="lineTit">团长姓名：</view>
						<view class="lineVal">{{ztInfo.receiver}}</view>
					</view>
					<view class="line dFlex jStart_aStart">
						<view class="lineTit">手机号码：</view>
						<view class="lineVal">{{ztInfo.phone}}</view>
					</view>
					<view class="line dFlex jStart_aStart">
						<view class="lineTit">详细地址：</view>
						<view class="lineVal">{{ztInfo.address+ztInfo.address_detail}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device:getApp().globalData.platform,
				status:'', // 全部订单  0待付款  10待发货  20 待收货  60 待评价
				
				page:1,
				list:[],
				load:false,
				
				ztFlag:false,
				ztInfo:{},
				link:'',
			};
		},
		onLoad(e) {
			this.link = this.tool.objToUrl(e);
			this.status = e.status?e.status:'';
		},
		onShow(){
			this.page = 1;
			this.initList();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		methods:{
			// 订单列表
			initList(){
				let datas = {
					page:this.page,
					pageSize:10
				};
				if(this.status.length){
					datas.status = this.status;
				}
				this.tool.getData('/api/sell/orderList',datas).then(res=>{
					console.log(res);
					if(res){
						let orderCount = 0;// 待支付状态存在的订单关闭的数目
						res.list.map((item,index)=>{
							item.shopCount = 0;
							let partCount = 0;
							let plCount = 0;
							item.ordergoods.map((item2,index2)=>{
								var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
								if(!reg.test(item2.goods.main_img)){
									item2.goods.main_img = 'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com'+item2.goods.main_img;
								}
								item.shopCount = item.shopCount + item2.goods_num;
								if(!item.source){
									if(item2.trade_status == 20){
										partCount++;
									}
								}else{
									if(item2.storage_status == 1){
										partCount++;
									}
								}
								if(item2.is_commented == 0){
									plCount ++;
								}
							})
							if(item.status == 10 && partCount>0){
								item.partFlag = true;
							}else{
								item.partFlag = false;
							}
							if(item.status == '60' && plCount>0){
								item.plFlag = true;
							}else{
								item.plFlag = false;
							}
							/* if(this.status == '0' && item.status == '90'){
								orderCount++;
								this.page == 1;
								this.initList();
							} */
						})
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 评价商品
			pinglun(id){
				uni.navigateTo({
					url:'./evaluate?id='+id
				})
			},
			// 邀请其他用户
			shareOrder(line){
				uni.navigateTo({
					url:'./shareAdv?id='+line.ordergoods[0].goods.id+'&inviteId='+line.source_id,
				})
			},
			// 查看物流
			wuliu(line){
				uni.navigateTo({
					url:'./logistics?id='+line.id
				})
			},
			// 确认收货
			sureGet(line){
				uni.showModal({
					content:'已确认用户收到并检查商品无误',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/confirmOrderGoods',{
								oid:line.id,
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 查看提货点
			THShop(line){
				this.ztInfo = JSON.parse(line.address_json);
				this.ztFlag = true;
			},
			// 订单详情
			lookDetail(orderId){
				uni.navigateTo({
					url:'./orderDetail?isPT=1&orderId='+orderId,
				})
			},
			// 切换菜单
			changeMenu(status){
				this.status = status;
				this.page = 1;
				this.initList();
			},
			// 取消订单
			cancelOrder(orderId,idx){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/cancelOrder',{
								id:orderId
							}).then(res=>{
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
				})
			},
			// 删除订单
			delOrder(orderId){
				uni.showModal({
					content:'确定删除该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/deleteOrder',{
								id:orderId
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
				})
			},
			// 支付订单
			payOrder(orderId){
				this.tool.getData('/api/mall/orderPay',{
					oid:orderId
				}).then(res=>{
					console.log(res);
					if(res){
						uni.requestPayment({
							provider:'wxpay',
							timeStamp:res.info.timeStamp,
							nonceStr:res.info.nonceStr,
							package:res.info.package,
							signType:res.info.signType,
							paySign:res.info.paySign,
							success: (pay) => {
								uni.showToast({
									title:'订单支付成功',
									icon:"success"
								})
								this.page = 1;
								this.initList();
							},
							fail:(err)=>{
								console.log(err);
								uni.showToast({
									title:'取消支付',
									icon:"none"
								})
							}
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.zz{
		.zt{
			width:85%;
			background: white;
			border-radius: 5px;
			.content{
				width:100%;
				padding: 12px;
				box-sizing: border-box;
				line-height: 32px;
				.line{
					width:100%;
					.lineTit{
						width:25%;
					}
					.lineVal{
						flex: 1;
					}
				}
			}
			.titles{
				width:100%;
				padding: 12px;
				box-sizing: border-box;
				font-weight: bold;
				.title{
					flex:1;
					text-align: center;
				}
				.closeIcon{
					width:12px;
				}
			}
		}
	}
	.orders{
		width: 100%;
		.list{
			width: 100%;
			padding: 0 3%;
			box-sizing: border-box;
			.type2{
				.orderInfo{
					width: 100%;
					margin-bottom: 8px;
					.shopImg{
						width:184rpx;
						height: 184rpx;
						overflow: hidden;
						background: white;
						margin-right: 12px;
						border-radius: 8px;
					}
					.other{
						flex: 1;
						.btns{
							width: 100%;
							margin-top: 6px;
							.btn{
								font-size: 12px;
								width: max-content;
								border-radius: 40px;
								color: #999999;
								border: 1px solid #D6D6D6;
								padding: 4px 12px;
								margin-right: 8px;
							}
							.pay{
								font-size: 12px;
								width: max-content;
								border-radius: 40px;
								padding: 4px 12px;
								margin-left: 8px;
								color: $col_active;
								border:1px solid $col_active;
							}
						}
						.user{
							color: #666666;
							.rmb{
								color: #333333;
								font-size: 12px;
							}
							.price{
								color: #333333;
								font-size: 16px;
								display: inline-block;
							}
						}
						.selSpec{
							color: #999999;
							margin: 8px 0 4px;
						}
						.shopName{
							font-size: 15px;
						}
					}
				}
				.shopInfo:last-child{
					margin: 0;
				}
			}
			.type1,.type2{
				width:100%;
				background:white;
				border-radius:8px;
				margin-bottom: 12px;
				.tj{
					width: 100%;
					padding: 12px;
					box-sizing: border-box;
					border-top: 1px solid #F9F9F9;
					border-bottom: 1px solid #F9F9F9;
					.yongjin{
						font-size:12px;
						color: #999999;
						text{
							font-size:16px;
							font-weight: bold;
							color:#EB0C0C;
						}
					}
					.shopCount{
						color: #999999;
					}
					.pay{
						text{
							color:#EB0C0C;
							font-weight: bold;
							font-size: 20px;
						}
						margin-left: 10px;
					}
				}
				.orderCount{
					width: 100%;
					padding: 12px;
					box-sizing: border-box;
					.btns{
						width: auto;
						.btn{
							font-size: 12px;
							width: max-content;
							border-radius: 40px; 
							border: 1px solid #D6D6D6;
							padding: 4px 12px;
							margin-left: 8px;
							background: none;
						}
						.pay{
							font-size: 12px;
							width: max-content;
							border-radius: 40px;
							padding: 4px 12px;
							margin-left: 8px;
							background: $col_active;
							color: white;
							border:1px solid $col_active;
						}
					}
				}
				.orderInfo{
					width: 100%;
					padding: 12px;
					box-sizing: border-box;
					.orderTime{
						font-size: 12px;
						color: #999999;
					}
					.shopInfo{
						width:100%;
						margin-bottom: 12px;
						.base{
							flex: 1;
							.shopName{
								flex: 1;
								font-weight: bold;
							}
							.tags{
								line-height: 16px;
								font-size: 12px;
								padding: 0 4px;
								color: white;
								border-radius: 4px;
								background: $col_active;
								margin-right: 8px;
							}
						}
						.price{
							font-size: 12px;
							color: #FF0000;
							text{
								font-size: 14px;
							}
						}
					}
				}
				
				.orderNum{
					width:100%;
					padding: 12px;
					box-sizing: border-box;
					color:#999999;
					.cutDown{
						background:rgba(121, 207, 171,0.2);
						border-radius: 40px;
						.showStatus{
							border-radius: 40px;
							color: white;
							background: $col_active;
							line-height: 16px;
							padding: 2px 6px;
						}
						.time{
							padding: 2px 4px;
							color: $col_active;
						}
					}
					.status1{
						color: $col_active;
					}
					.status2{
						color: #FF0000;
					}
				}
			}
		}
		.menus{
			width: 100%;
			// padding: 0 6px;
			box-sizing: border-box;
			margin-bottom: 12px;
			background: white;
			overflow: hidden;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			.menuOne{
				width: auto;
				text-align: center;
				// padding: 11px 12.5px 0;
				padding: 11px 0 0;
				display: inline-block;
				color: #666666;
				.line{
					width: 20px;
					height: 3px;
					background: white;
					margin: 8px auto 0;
				}
			}
			.active{
				color: $col_active;
				font-weight: bold;
				.line{
					background: $col_active;
				}
			}
			.menuOne:first-child{
				padding-left:18px;
			}
			.menuOne:last-child{
				padding-right:18px;
			}
		}
	}
	.iosPage{
		padding-bottom:env(safe-area-inset-bottom);
	}
</style>
